<template>
  <div class="container ta-life">
    <nav-bar title="详情" />
    <div class="detail">
      <!-- <div class="delete" v-if="isMine" @click="deleteLife">&times;</div> -->
      <div class="imgblank" style="height: 0; overflow: hidden;" v-for="(item, index) in life.ImagePath" :key="index">
        <img style="width: 100%" @load="loadImg" :src="item" :id="'bannerImg'+index" />
      </div>
      <div class="banner">
        <van-swipe :autoplay="3000" indicator-color="#d50721">
          <van-swipe-item v-for="(image, index) in life.ImagePath" :key="index">
            <img :src="image+'?x-oss-process=image/resize,w_900/quality,q_70'" :style="{'height': imgHeight?imgHeight + 'px' : 'auto', 'opacity': opacity}" />
          </van-swipe-item>
        </van-swipe>
        <!-- <img src='../../assets/img/life-detail.jpg' /> -->
      </div>
      <div class="content">
        <div class="user-say">
          <div class="name-time">
            <img @click="goToYou(life.MemberId)" v-if="life.Photo===''" class="avatar" src='../../assets/img/person.png' />
            <img @click="goToYou(life.MemberId)" v-else class="avatar" :src='life.Photo' />
            <div @click="goToYou(life.MemberId)" class="name">
              <h3>{{life.MemberName}}</h3>
              <em>{{life.AddedDate}}</em>
            </div>
            <div class="concern" @click.stop="followUser" v-if="!isMine">
              <span v-if="isFollow">取消关注</span>
              <img v-else src='../../assets/img/icon-concern.png' />
            </div>
          </div>
          <div class="say">
            {{life.ShortDescription}}
          </div>
        </div>
        <div class="icons">
          <div class="icon" @click="like">
            <img src='../../assets/img/good.png' v-if="!life.IsZan" />
          <img src='../../assets/img/good-on.png' v-else />
          </div>
          <div class="icon" @click="toComment">
            <img src='../../assets/img/comment.png' />
          </div>
          <!-- <div class="icon" @click="favorite">
            <img src='../../assets/img/star.png' v-if="!life.IsFavorite" />
          <img src='../../assets/img/star-on.png' v-else />
          </div> -->
          <div class="icon" id="copyBtn">
            <img src='../../assets/img/share.png' />
          </div>
          <div class="icon" v-if="isMine" @click="deleteLife">
            <img src='../../assets/img/del.png' />
          </div>
        </div>
        <div class="dis">
          <div class="like-comment-share">
            <span class="cur">评论 {{commentList.length}}</span>
            <span>赞 {{life.ZanCounts}}</span>
            <!-- <span> </span> -->
          </div>
          <div class="comment">
            <div class="title">
              <div class="amount">{{commentList.length}}条评价</div>
            </div>
            <div class="list">
              <div class="item" v-for="(item, index) in commentList" :key="index">
                <!-- <em class="delete">删除</em> -->
                <h4>{{item.UserName}}:</h4>
                <p>{{item.Text}}</p>
                <!-- <div class="prompt">
                  <span>WILIEN: 本馆定于元旦休假，1月1日10点-20点～</span>
                </div> -->
                <div class="time">{{item.AddDate}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="send" v-if="commentShow">
      <input type="text" v-model="comment" />
      <button @click="commentSubmit">提交</button>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { 
  getLifeComment, 
  insertLifeComment,
  favoriteLife,
  likeLife,
  getMyLifeDetail,
  deleteLife,
  followUser,
  getIsFollow
} from '../../network/life'
import { Toast, Dialog } from 'vant'
import { sharePage } from '../../utils/wx'
import { isEmoji, filterEmoji } from '../../utils'
import { copyInit, getShareUrl } from '../../utils/share'


export default {
  name: 'LifeDetail',
  components: {
    NavBar
  },
  data() {
    return {
      userKey: localStorage.getItem('userKey'),
      commentShow: false,
      life: {},
      isMine: false,
      comment: '',
      commentList: [],
      images: [
        require('../../assets/img/life-detail.jpg'),
        require('../../assets/img/life-detail.jpg')
      ],
      imgHeight: 0,
      opacity: 0,
      imgNum: 0,
      isFollow: false,
    }
  },
  async mounted() {
    await this.getMyLifeDetail()
    if(this.userKey){
      this.getIsFollow()
    }
    this.getLifeComment()
    this.sharePage()
    copyInit('life')
  },
  methods: {
    getIsFollow(){
      let MemberId = this.life.MemberId
      let requestData = {
        userKey: this.userKey,
        MemberId,
      }
      getIsFollow(requestData, (res) => {
        this.isFollow = res
      })
    },
    followUser(){
      let MemberId = this.life.MemberId
      let requestData = {
        userKey: this.userKey,
        MemberId,
      }
      followUser(requestData, () => {
        // Toast('关注成功')
        this.getIsFollow()
      })
    },
    deleteLife(){
      Dialog.confirm({
        message: '确认删除该主题?'
      }).then(() => {
        let requestData = {
          userkey: this.userKey,
          id: this.$route.query.id
        }
        deleteLife(requestData, () => {
          Toast('删除成功')
          setTimeout(() => {
            this.$router.push({
              path: '/life',
              query: {
                action: 'delete'
              }
            })
          }, 1000);
        })
      }).catch(() => {
        // on cancel
      })
    },
    goToYou(MemberId){
      this.$router.push({
        path: '/life',
        query: {
          action: 'you',
          id: MemberId,
        }
      })
    },
    async sharePage(){
      sharePage({
        title: this.life.ShortDescription,
        desc: '好友给你推荐了' + this.life.ShortDescription,
        link: await getShareUrl('life'),
      })
    },
    loadImg(e){
      this.imgNum++
      if(this.imgNum>=this.life.ImagePath.length){
        this.initSwiperH()
      }
    },
    initSwiperH(){
      let height = 0
      for(let i = 0; i<this.life.ImagePath.length; i++){
        let heigthImg = document.getElementById('bannerImg'+i).offsetHeight
        if(heigthImg>height){
          height = heigthImg
        }
      }
      this.imgHeight = height
      this.opacity = 1
    },
    getMyLifeDetail(){
      return new Promise((resolve, reject) => {
        let requestData = {
          userkey: this.userKey,
          id: this.$route.query.id,
        }
        getMyLifeDetail(requestData, life => {
          life.AddedDate = life.AddedDate.split('T').join(' ')
          life.ImagePath = life.ImagePath.split(',')
          this.life = life
          this.isMine = localStorage.getItem('userId') == life.MemberId
          resolve()
        })
      })
    },
    getLifeComment(){
      let requestData = {
        userkey: this.userKey,
        id: this.$route.query.id
      }
      getLifeComment(requestData, list => {
        list.filter(item => {

        })
        this.commentList = list
      })
    },
    toComment(){
      this.commentShow = !this.commentShow
    },
    commentSubmit(){
      let requestData = {
        userkey: this.userKey,
        Text: this.comment,
        ThemeId: this.$route.query.id,
        ParentId: 0, // 一级评论传0, 二级评论传一级的id
      }
      if(requestData.Text === ''){
        Toast('评论内容不能为空')
        return false
      }
      // 检测是否表情符号
      let emojiFlag = isEmoji(this.comment)
      if(emojiFlag){
        Toast('不支持表情符号')
        setTimeout(() => {
          this.comment = filterEmoji(this.comment)
        }, 2000)
        return false
      }
      insertLifeComment(requestData, () => {
        Toast('评论成功')
        this.comment = ''
        this.getLifeComment()
      })
    },
    like(){
      let requestData = {
        userkey: this.userKey,
        ThemeId: this.$route.query.id
      }
      likeLife(requestData, async msg => {
        await this.getMyLifeDetail()
      })
    },
    favorite(){
      let requestData = {
        userkey: this.userKey,
        ThemeId: this.$route.query.id
      }
      favoriteLife(requestData, async msg => {
        Toast(msg)
        await this.getMyLifeDetail()
      })
    },
  },
}
</script>

<style>
.ta-life .van-swipe__track img{
  object-fit: cover;
  transition: all 1s;
}
/* .ta-life .van-swipe-item{
  display: flex;
  justify-content: center;
} */
</style>

<style scoped>
.detail{
  position: relative;
}
.banner img{
  width: 100%;
}
.icons{
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  margin-top: 10px;
  background-color: #fff;
}
.icon{
  width: 16px;
  height: 16px;
  padding: 20px;
}
.icon img{
  width: 100%;
}
.dis{
  padding: 15px 25px 65px 25px;
  margin-top: 10px;
  font-size: 12px;
  background-color: #fff;
}
.user-say{
  background-color: #fff;
  margin-top: 10px;
  padding: 20px 25px;
}
.user-say .name-time{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
}
.user-say .name-time img.avatar{
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-right: 15px;
}
.user-say .name-time .name{
  flex-grow: 1;
}
.user-say .name-time .name h3{
  font-size: 14px;
}
.user-say .name-time .name em{
  color: #999;
  font-size: 14px;
}
.user-say .name-time .concern img{
  width: 22px;
}
.user-say .name-time .concern span{
  color: #999;
  font-size: 14px;
}
.say{
  font-size: 14px;
  padding-top: 10px;
}
.like-comment-share{
  height: 40px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.like-comment-share .cur{
  color: #d50721;
}
.comment{
  padding-top: 10px;
  margin-top: 0;
  border-top: 1px solid #e6e6e6;
}
.comment .title{
  display: flex;
  font-size: 14px;
  justify-content: space-between;
}
.comment .title{
  position: relative;
  padding-right: 15px;
  padding-bottom: 15px;
}
.comment .list .item{
  position: relative;
  font-size: 14px;
  padding: 5px 0;
  line-height: 1.8;
  border-bottom: 1px solid #e4e4e4;
}
.comment .list .item em.delete{
  position: absolute;
  right: 0;
  top: 0;
  padding: 0 5px 0 10px;
  line-height: 40px;
  z-index: 9;
}
.comment .list .item p{
  color: #757575;
}
.comment .list .item .prompt{
  background-color: #f4f4f4;
  border-radius: 3px;
  padding: 3px 8px;
  color: #333;
}
.comment .list .item .time{
  color: #ccc;
  padding-top: 10px;
  font-size: 12px;
}
.send{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  background-color: #e7e7e7;
  z-index: 9;
}
.send input{
  flex-grow: 1;
  background: none;
  padding: 0 15px;
  box-sizing: border-box;
}
.send button{
  width: 100px;
  color: #ffffff;
  background-color: #000000;
}
.delete{
  position: absolute;
  right: 15px;
  top: 15px;
  z-index: 1001;
  width: 24px;
  height: 24px;
  line-height: 22px;
  border-radius: 50%;
  text-align: center;
  color: rgba(0, 0, 0, .8);
  background: rgba(255,255,255,.8);
}
</style>